.@{prefix}-tinymce {
  .border-radius(2px);
  // Avoid FOUC
  visibility: visible !important;
  position: relative;
  display: flex !important;
  flex-direction: row;
}

.@{prefix}-mainbox {
  flex: 1;
}

.@{prefix}-sidebar {
  flex: none;
  width: 248px;
  border-left: 1px solid @panel-border;
  // .border-radius(2px);
  display: flex;
  flex-direction: column;

  .nav-tabs {
    flex: none;
    margin-bottom: 0;
    border-bottom: 1px solid @tab-border !important;
    li:first-child {
      margin-left: 15px;
    }
    a {
      border-top: none !important;
      border-radius: 0 !important;
      line-height: 12px !important;
    }
  }

  .tab-content {
    flex: 1;
    overflow: scroll;
    overflow-x: hidden;
    background-color: #fff;
  }

  .tab-pane {
    ul {
      list-style: none;
      margin: 0;
      padding: 5px;
    }
    li {
      margin: 5px;
      padding: 2px;
      min-height: 60px;
      border: 1px solid #9e9e9e;
      cursor: pointer;
      &:hover {
        border-color: #2280d0;
      }
      &.selected {
        border: 2px solid #2280d0;
        padding: 1px;
        position: relative;
        &:after {
          content: '已插入';
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 12px;
          background: #2280d0;
          color: #fff;
          padding: 1px 1px 1px 3px;
        }
      }
    }
    .name {
      display: block;
      // float: left;
      // padding: 0 3px;
      max-height: 60px;
      white-space: normal;
      text-align: justify;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 20px;
    }
    .thumb {
      display: inline-block;
      width: 60px;
      height: 60px;
      // text-align: center;
      // &:before {
      //   content: '';
      //   display: inline-block;
      //   height: 60px;
      //   vertical-align: middle;
      // }
      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
      + .name {
        display: inline-block;
        width: 139px;
      }
    }
  }
}

.@{prefix}-fullscreen {
  border: 0; padding: 0; margin: 0;
  overflow: hidden;
  height: 100%;
  z-index: 604;
}

div.@{prefix}-fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: auto;
}

.@{prefix}-wordcount {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
}

div.@{prefix}-edit-area {
  background: #FFF;
  filter: none;
}

.@{prefix}-statusbar {
  position: relative;
}

.@{prefix}-statusbar .@{prefix}-container-body {
  position: relative;
}

.@{prefix}-fullscreen .@{prefix}-resizehandle {
  display: none;
}

// Charmap

.@{prefix}-charmap {
  border-collapse: collapse;
}

.@{prefix}-charmap td {
  cursor: default;
  border: 1px solid @panel-border;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 2px;
}

.@{prefix}-charmap td div {
  text-align: center;
}

.@{prefix}-charmap td:hover {
  background: @btn-bg-hlight;
}

.@{prefix}-grid td div {
  border: 1px solid @grid-border;
  width: 12px; height: 12px;
  margin: 2px;
  cursor: pointer;

  &:focus {
    border-color: @grid-border-active;
  }
}

.@{prefix}-grid {
  border-spacing: 2px;
  border-collapse: separate;

  a {
    display: block;
    border: 1px solid transparent;

    &:hover, &:focus {
      border-color: @grid-border-active;
    }
  }
}

.@{prefix}-grid-border {
  margin: 0 4px 0 4px;

  a {
    border-color: @grid-border;
    width: 13px; height: 13px;
  }

  a:hover, a.@{prefix}-active {
    border-color: @grid-border-active;
    background: @grid-bg-active;
  }
}

.@{prefix}-text-center {
  text-align: center;
}

div.@{prefix}-tinymce-inline {
  width: 100%;
  .box-shadow(none);
}

// Reduce double margins between toolbar rows

.@{prefix}-toolbar-grp {
  padding-bottom: 2px;
}

.@{prefix}-toolbar-grp .@{prefix}-flow-layout-item {
  margin-bottom: 0;
}

// RTL

.@{prefix}-rtl .@{prefix}-wordcount {
  left: 0;
  right: auto;
}
